import {
  Button,
  Card,
  DatePicker,
  Form,
  Icon,
  Input,
  InputNumber,
  Radio,
  Select,
  Tooltip,
} from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import styles from './style.less';

const FormItem = Form.Item;

interface UserInfoProps extends FormComponentProps {
  submitting: boolean;
  dispatch: Dispatch<any>;
}

@connect(({ manageUserInfo }) => ({ manageUserInfo }))
class UserInfo extends Component<UserInfoProps> {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'manageUserInfo/init',
    });
  }

  handleSubmit = (e: React.FormEvent) => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        dispatch({
          type: 'manageUserInfo/submitRegularForm',
          payload: values,
        });
      }
    });
  };

  render() {
    const { submitting, manageUserInfo } = this.props;
    const {
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper content={''}>
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} style={{ marginTop: 8 }}>
            <FormItem
              {...formItemLayout}
              label={
                <span>
                  <FormattedMessage id="manage-userinfo.username.label" />
                  <em className={styles.optional}>
                    <FormattedMessage id="manage-userinfo.form.optional" />
                  </em>
                </span>
              }
            >
              {getFieldDecorator('username', {
                rules: [{ required: true, message: '请填写用户名！' }],
                initialValue: manageUserInfo.user.username,
              })(<Input placeholder="填写姓名或昵称" />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={
                <span>
                  <FormattedMessage id="manage-userinfo.mobile.label" />
                  <em className={styles.optional}>
                    <FormattedMessage id="manage-userinfo.form.optional" />
                  </em>
                </span>
              }
            >
              {getFieldDecorator('mobile', {
                rules: [{ required: true, message: '请填写手机号码！' }],
                initialValue: manageUserInfo.user.mobile,
              })(<Input placeholder="例如：186****5678" />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={
                <span>
                  <FormattedMessage id="manage-userinfo.email.label" />
                  <em className={styles.optional}>
                    <FormattedMessage id="manage-userinfo.form.optional" />
                  </em>
                </span>
              }
            >
              {getFieldDecorator('email', {
                rules: [{ required: true, message: '请填写邮箱地址！' }],
                initialValue: manageUserInfo.user.email,
              })(<Input placeholder="例如：xxx@163.com" />)}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                确认修改
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Form.create<UserInfoProps>()(
  connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
    submitting: loading.effects['manageUserInfo/submitRegularForm'],
  }))(UserInfo),
);
